<link rel="stylesheet" type="text/css" href="/assets/third-party/datatables/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="/assets/css/dataTables.bootstrap.css">
<link rel="stylesheet" type="text/css" href="/assets/third-party/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css">

<style type="text/css">
    .il{
        display: inline;
    }
    .form-group .control-label{
        padding-right: 5px;
    }
    .form-group .col-sm-7{
        padding-left: 5px;
    }
    .form-group input, .form-group select{
        width: 88%;
        display: inline;
    }
</style>

<div class="container" style="margin-top: 60px;">
    <div class="row">
        <div class="col-lg-12">
            <!--<a href="#" class="btn btn-info"> <i class="fa fa-search"></i> 查询 </a> -->
            <a href="#" class="btn btn-success" data-toggle="modal" data-target="#studentModal"> <i class="fa fa-plus"></i> 新增选课记录 </a>
            <!--<a href="#" class="btn btn-success"> <i class="fa fa-plus"></i> 全选 </a>
            <a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 批量删除 </a>
            <a href="#" class="btn btn-danger"> <i class="fa fa-plus"></i> 刷新 </a>-->
        </div>
    </div>
    <div class="row" style="margin-top: 10px;">
        <div class="col-lg-12">
            <div class="panel panel-default">
                <div class="panel-heading">
                    选课记录
                </div>
                <!-- /.panel-heading -->
                <div class="panel-body">
                    <table id="studentList" class="table table-bordered table-hover">
                        <thead>
                            <tr>
                                <th>课程名称</th>
                                <th>选课时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($items as $key => $value) { ?>
                            <tr data-id="<?php echo $value->id; ?>">
                                <td><?php echo $value->course->name; ?></td>
                                <td><?php echo date('Y-m-d H:i:s', $value->created); ?></td>
                                <td>
                                    <a href="/admin/student/learn_records?student_id=<?php echo $value->id;?>" class="btn btn-sm btn-info"> <i class="fa fa-search"></i> 上课记录 </a>
                                    <a role="edit" class="btn btn-sm btn-info" data-toggle="modal" data-target="#studentModal"> <i class="fa fa-pencil-square-o"></i> 编辑 </a>
                                    <a class="btn btn-sm btn-danger" data-toggle="modal" data-target="#confirmModal"> <i class="fa fa-trash-o"></i> 删除 </a>                                 
                                </td>
                            </tr>
                            <?php } ?>                          
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 学员详情模态框 -->
<div class="modal fade" id="studentModal" tabindex="-1" role="dialog" aria-labelledby="studentModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title" id="studentModalTitle"> 学员资料 </h4>
            </div>
            <div class="modal-body">
                <form id="frmMember" role="form" action="" method="post" data-parsley-validate>
                    <div class="form-group">
                        <label for="phone">学员编号</label>
                        <input type="text" class="form-control" id="no" name="no" placeholder="系统自动生成的学员卡号" value="" required>
                    </div>
                    <div class="form-group">
                        <label for="first_name">学员姓名</label>
                        <input type="text" class="form-control" id="first_name" name="first_name" placeholder="姓" style="width: 44%; display: inline;" required  data-parsley-errors-container="#name_help_block">
                        <input type="text" class="form-control" id="last_name" name="last_name" placeholder="名" style="width: 44%; display: inline;">
                        <p id="name_help_block"></p>
                    </div>
                    <div class="form-group">
                        <label for="phone">学员性别</label>
                        <select id="gender" name="gender" class="form-control">
                            <option value="">保密</option>
                            <option value="男">男</option>
                            <option value="女">女</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="birthday">学员生日</label>
                        <input type="text" class="form-control" id="birthday" name="birthday" placeholder="点击选择生日" role="datetime">
                    </div>
                    <div class="form-group">
                        <label for="grade_id">所属年级</label>
                        <select id="grade_id" name="grade_id" class="form-control" required>
                            <?php foreach ($grades as $key => $value) { ?>
                            <option value="<?php echo $value->id; ?>"><?php echo $value->name; ?></option>
                            <?php } ?>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="tel">家庭电话</label>
                        <input type="text" class="form-control" id="tel" name="tel" placeholder="家庭电话">
                    </div>
                    <div class="form-group">
                        <label for="phone">手机号码</label>
                        <input type="text" class="form-control" id="phone" name="phone" placeholder="手机号码" required>
                    </div>
                    <div class="form-group">
                        <label for="email">邮箱地址</label>
                        <input type="text" class="form-control" id="email" name="email" placeholder="邮箱地址">
                    </div>
                    <div class="form-group">
                        <label for="qq">Q Q 号码</label>
                        <input type="text" class="form-control" id="qq" name="qq" placeholder="QQ号码">
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" id="btnSave" class="btn btn-primary"> 保存 </button>
            </div>
        </div>
    </div>
</div>

<!-- 确认删除模态框 -->
<div class="modal fade" id="confirmModal" tabindex="-1" role="dialog" aria-labelledby="confirmModalTitle" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <div class="alert alert-warning">
                    <strong>确定删除？</strong>
                    <p>删除该学员，所有与该学员相关的数据将全部被清空!</p>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal"> 取消 </button>
                <button type="button" id="btnConfirm" class="btn btn-danger"> 确定 </button>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="/assets/third-party/datatables/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="/assets/js/dataTables.bootstrap.js"></script>
<script type="text/javascript">
    
    var flag = false;
    $(function(){

        $('#studentList').dataTable({
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "很抱歉，未找到相关数据",
                "sInfo": "从 _START_ 至 _END_ /共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有符合条件的数据",
                "sInfoFiltered": "(从 _MAX_ 条数据中检索)",
                "sSearch": "搜索：",
                "oPaginate": {  
                    "sFirst": "首页",  
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "末页"
                }  
            },
            fnDrawCallback: function(){

                if(window.flag == false){
                    window.flag = true;
                    var index = localStorage.getItem('pagination_index');
                    localStorage.removeItem('pagination_index');
                    if( ! index){
                        index = 1;
                    }
                    index -= 1;

                    $('#studentList').dataTable().fnPageChange(index);
                    
                }
            }
        });

        $('#studentList').delegate('a[data-target="#studentModal"]', 'click', function(){
            $('#no').val(Date.parse(new Date()) / 1000);
            $('#first_name').val('');
            $('#last_name').val('');
            $('#gender').val('');
            $('#birthday').val("");
            $('#level_id').val("");
            $('#tel').val("");
            $('#phone').val("");
            $('#email').val("");
            $('#qq').val("");

            if($(this).attr('role') == 'edit'){
                localStorage.setItem('pagination_index', $('.pagination .active').find('a').text());
                $('#frmMember').attr('action', '/admin/student/edit/' + $(this).parent().parent().attr('data-id'));
                $.get('/admin/student/view/' + $(this).parent().parent().attr('data-id'), 
                    function(data, status){
                        if(data.status == 'succ'){
                            var item = data.data;
                            $('#no').val(item.no);
                            $('#real_no').val(item.real_no);
                            $('#first_name').val(item.people.first_name);
                            $('#last_name').val(item.people.last_name);
                            $('#nickname').val(item.people.nickname);
                            $('#gender').val(item.people.gender);
                            $('#birthday').val(item.people.birthday);
                            $('#level_id').val(item.level_id);
                            $('#tel').val(item.people.tel);
                            $('#phone').val(item.people.phone);
                            $('#email').val(item.people.email);
                            $('#qq').val(item.people.qq);
                        }
                    }, 'json');
            }else{
                $('#frmMember').attr('action', '/admin/student/create/');
            }
        });

        $('#grade').change(function(){
            $('input[type="search"]').val($(this).val()).keyup();
        });

        $('a[data-target="#confirmModal"]').click(function(){
            $('#btnConfirm').attr('data-id', $(this).parent().parent().attr('data-id'));
        });

        $('#btnConfirm').click(function(){
            var id = $(this).attr('data-id');
            $.get('/admin/student/delete/' + id,
                function(data, status){
                    if(data.status == 'succ'){
                        $('#studentList').find('tr[data-id="' + id + '"]').remove();
                        $('#confirmModal').modal('hide');
                    }
                }, 'json');
        });
    });
</script>

<script type="text/javascript" src="/assets/third-party/parsley/parsley.min.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.js"></script>
<script type="text/javascript" src="/assets/third-party/parsley/i18n/zh_cn.extra.js"></script>
<script type="text/javascript">
    $(function(){
        $('#btnSave').click(function(){
            $('#frmMember').submit();
        });
    });
</script>

<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.min.js"></script>
<script type="text/javascript" src="/assets/third-party/bootstrap-datetimepicker-master/js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript">
$(function(){
    $('input[role="datetime"]').datetimepicker({
        language: 'zh-CN'
    });
});
</script>